<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible"  content="ie=edge"/>
    <title>原生水平滚动跟手轮播图演示</title>
 
    <link href="./css/mui.css" rel="stylesheet" />
    <link href="./css/chat.css" rel="stylesheet" />  
	<link href="./css/index.css" rel="stylesheet" />
	
	
    <script src="./js/common/jquery.min.js"></script>
	<script src="./js/common/mui.js" ></script>  
	
	<style>
		html,
		body {
			height: 100%;
			margin: 0px;
			padding: 0px;
			overflow: hidden;
			-webkit-touch-callout: none;
			-webkit-user-select: none;
		}
		
		footer{
			position: fixed;
			bottom: 0px;
			/* bottom: 368px; */
			/* z-index: 99; */
		}
	</style>
	
</head>  
<body >
  
<div  id="msgDiv" style=" width:100%;height:60px; top: 0px;">
	<view id='msgList' >
		<!-- 内容显示 -->	
	</view>
</div>

<footer  class='bottom' id='bottom'>
			
			<div class="footer-left">
				<img src="img/tab/song.png" id="mic" style="height: 32px; width:32px;margin-left: -5px; margin-top: -2px; border-radius:5px" />
			</div>

			<div class="footer-center">
				<textarea id='msg-text' type="text" class='input-text'></textarea>
				<button id='msg-sound' type="button" class='input-sound' style="display: none;">按住说话</button>
			</div>

			<label for="" class="footer-right">
	            <img src="img/tab/smail.png" id="emoji" style="height: 32px; width:32px;float: left; margin-left: -40px;border-radius:5px" />
				<button type="button" class="mui-btn mui-btn-gray" id="send">发送</button>
			</label>
</footer>
		

		
<div class="container keyboard"  id='emoji-key'  hidden  style="background-color: white;">
    <ul class="list" id='emojiList' >
        <!-- 最后一个放前面-->
         <!--<li class="item before">
            <img src="http://www.superslide2.com/otherDemo/2.24/images/4.jpg"/>
        </li>-->
        
        
        <!-- 开始遍历-->
        <!--<li class="item">
          <img src="http://www.superslide2.com/otherDemo/2.24/images/1.jpg"/>
        </li>
     
         <li class="item">
            <img src="http://www.superslide2.com/otherDemo/2.24/images/2.jpg"/>
        </li>
         <li class="item">
            <img src="http://www.superslide2.com/otherDemo/2.24/images/3.jpg"/>
        </li>
          <li class="item">
            <img src="http://www.superslide2.com/otherDemo/2.24/images/4.jpg"/>
        </li>-->
        
        <!--结束遍历-->
        
        
        <!-- 第一个放后面-->
         <!--<li class="item end">
          <img src="http://www.superslide2.com/otherDemo/2.24/images/1.jpg"/>
        </li>-->
    </ul>

    <ul class="point" id='pointList' >
        <!--<li class="point-item active"></li>-->
        <!--<li class="point-item"></li>-->
        <!--<li class="point-item"></li>-->
    </ul>

</div>


<div class="keyboard"  hidden  style="background-color: slategrey;top: 460px;position: fixed;">
	
	
<div>
	<img id="add" src="./img/tab/add2.png"  
	   style="margin-left: 10px; margin-top: 12px; width: 32px; height: 32px;">
</div>
	
<div style="width:74%; font-size: 40px; margin-top: -42px;margin-left: 45px; height: 48px;" class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
			    <div class="mui-scroll" id='pop' style="margin-top: 5px; ">
			      <!--  <a class="mui-control-item mui-active" >
			            推荐
			        </a> -->
			       <!-- <a class="mui-control-item">
			            <img src="img/tab/album-ajmd.png" id="id0" style="width: 32px; height: 32px;"/>
			        </a>
			        <a class="mui-control-item">
			            <img src="img/tab/album-xxy.png" id="id1" style="width: 32px; height: 32px;"/>
			        </a>
					<a class="mui-control-item">
			            <img src="img/tab/album-douyin.png" id="id2" style="width: 32px; height: 32px;"/>
			        </a>
					<a class="mui-control-item">
					    <img src="img/tab/album-ldw.gif"    id="id3" style="width: 32px; height: 32px;"/>
					</a>
 					<a class="mui-control-item">
			            <img src="img/tab/album-lt.png"  style="width: 32px; height: 32px;"/>
			        </a>
					<a class="mui-control-item">
			           <img src="img/tab/album-tsj.gif"  style="width: 32px; height: 32px;"/>
			        </a>
					<a class="mui-control-item">
					   <img src="img/tab/album-bobo.gif" style="width: 32px; height: 32px;"/>
					</a>
					<a class="mui-control-item">
					   <img src="img/tab/album-emoji.png" style="width: 32px; height: 32px;"/>
					 </a> -->
			    </div>
			</div>
		<img  id='setting' src="./img/tab/setting.png" style="float:left; margin-left:320px; margin-top: -44px; width: 36px; height: 36px;">
		
<div >
	<h3 class="tab" >
		<div> 
		   表情个数:
		   <a href="#" id='pageTotal'>0</a>
		</div>
		<br />
		<div>
		   表情位置:
		   <a href="#" id='pageNum'>0</a>
		</div>
		
	</h3>
</div>


</div>

<script src="./js/common/index.js"></script>

<script>
	
	mui.plusReady(function(){
	// 获取聊天页面webview
	var chattingWebview = plus.webview.currentWebview();
	// 设置聊天页面的软键盘样式
	chattingWebview.setStyle({
		softinputMode: "adjustResize"
	});
	
	var emoji = document.getElementById("emoji");
	var flag=true
	
	emoji.addEventListener("tap", function(){
		if(flag){
			$("footer").css('bottom','340px')
		}else{
			$("footer").css('bottom','0px')
		}
		$(".keyboard").attr('hidden',!flag)
		flag=!flag
	});
	
	// 获取dom控件
	var msg_text = document.getElementById("msg-text");
	var send = document.getElementById("send");
	
	var msgDiv = document.getElementById("msgDiv");
	
	var msgList = document.getElementById("msgList");
	
	// 点击消息列表 隐藏表情键盘
	msgDiv.addEventListener("tap", function() {
		// 放置到底部
		$("footer").css('bottom','0px')
		// 隐藏表情键盘
		$(".keyboard").attr('hidden',true)
		// flag 重新赋值
		flag=true
	});
	
	msg_text.addEventListener('focus',function(){
		// 放置到底部
		$("footer").css('bottom','0px')
		// 隐藏表情键盘
		$(".keyboard").attr('hidden',true)
		// flag 重新赋值
		flag=true
	})
	
	
	// 监听用户输入，使得send按钮变色
	msg_text.addEventListener("input", function(){
		var msg_text_val = msg_text.value;
		if (msg_text_val.length > 0) {
			send.setAttribute("class", "mui-btn-green");
		} else {
			send.setAttribute("class", "mui-btn-gray");
		}
	}); 
	
	
	// 监听用户输入，使得send按钮变色
	msg_text.addEventListener("change", function(){
		var msg_text_val = msg_text.value;
		if (msg_text_val.length > 0) {
			send.setAttribute("class", "mui-btn-green");
		} else {
			send.setAttribute("class", "mui-btn-gray");
		}
	}); 
	
	
	// 发送消息按钮的事件绑定
	send.addEventListener("tap", function(){
		
		// 放置到底部
		$("footer").css('bottom','0px')
		// 隐藏表情键盘
		$(".keyboard").attr('hidden',true)
		// flag 重新赋值
		flag=true
		
		// 获取消息内容
		var msg_text_val = msg_text.value;
		// alert(msg_text_val)
		msg_text_val=replaceEmoji(msg_text_val)
		// alert(msg_text_val)
		
		// 判断消息内容，如果长度等于0，则return
		if (msg_text_val.length === 0) {
			return;
		}
		
		msgList.insertAdjacentHTML("beforeend", msg_text_val);
		
		
		// 发送消息, 渲染消息的html到msg div之下
		// sendMsg(app.imgServerUrl + me.faceImage, msg_text_val);
		// 清空消息文本框中的内容
		msg_text.value = "";
		// 发送消息完毕之后，把发送按钮的颜色改为灰白色
		send.setAttribute("class", "mui-btn-gray");
	});
						
	
	
	var replaceEmoji =function (str) {
		
		var currentData=[]
		$.ajax({
		  url: './json/emoji/emoji-qq.json',  // 相对路径是index.html 的相对路径
		  data: {},
		  type: "GET", 
		  cache:false, 
		  async:false,  // 设置为同步加载   默认是true：异步，false：同步。
		  dataType: 'json',
		  success: function(data) {
			      // alert(data.length)
				  currentData=data
		   }
		});	
		
		let replacedStr = str.replace(/\[([^(\]|\[)]*)\]/g, (item, index) => {
			for (let j = 0; j < currentData.length; j++) {
					if (currentData[j].alt == item) {
						//在线表情路径，图文混排必须使用网络路径，请上传一份表情到你的服务器后再替换此路径
						//比如你上传服务器后，你的100.gif路径为https://www.xxx.com/emoji/100.gif 则替换onlinePath填写为https://www.xxx.com/emoji/
						// let onlinePath = 'https://www.xxx.com/emoji/';
						let imgstr = '<img src="' + currentData[j].emoji + '">';
						return imgstr;
					}
				}
		});
		return replacedStr;
	}				
	
	
	
	})
</script>


 
</body>
</html>